<template>
  <el-dialog
    v-toggle-full
    class="base-dialog"
    :custom-class="'panna-dialog_big'"
    :title="title"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <p slot="title">{{ title }}</p>
    <el-form
      ref="formData"
      :model="formData"
      class="base-pipeline-layout"
      label-width="130px"
      :rules="formRules"
      status-icon
    >
      <el-form-item
        :label="sysBusinessDetectionItem.projectSubItems"
        prop="detectionItemName"
      >
        <el-input
          v-model="formData.detectionItemName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item :label="sysBusinessDetectionItem.symbol" prop="unitSymbol">
        <el-input
          v-model="formData.unitSymbol"
          style="width: 100%"
          disabled
        ></el-input>
        <div class="selectProductStandard" @click="selectUnit">+</div>
      </el-form-item>
      <el-form-item
        :label="sysBusinessDetectionItem.judgmentSymbol"
        prop="decisionSymbol"
      >
        <el-select
          v-model="formData.decisionSymbol"
          :placeholder="operateType.pleaseSelect"
          @change="decisionSymbolChange"
        >
          <el-option
            v-for="item in decisionSymbolList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="sysBusinessDetectionItem.qualityIndex"
        prop="qualityIndex"
      >
        <el-input
          v-model="formData.qualityIndex"
          :placeholder="qualityIndexPlaceholder"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="base-dialog-footer">
      <el-button type="primary" @click="submitForm">{{
        operateType.save
      }}</el-button>
      <el-button @click="handleClose">{{ operateType.cancel }}</el-button>
    </span>

    <ChoiceUnit
      v-if="unitVisible"
      ref="ChoiceUnit"
      :unit-visible.sync="unitVisible"
      @setUnit="setUnit"
    />
  </el-dialog>
</template>
<script>
import { getDictList } from "../../../../api/System/SystemDict.js";
import ChoiceUnit from "./ChoiceUnit.vue";
export default {
  name: "SysBusinessDetectionItemDialog",
  components: {
    ChoiceUnit,
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    updateState: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      unitVisible: false,
      title: "",
      dialogVisible: false,
      qualityIndexPlaceholder: "",
      decisionSymbolList: [],
      formData: {
        // 序号用于id==0的删除
        serialNumber: "",
        id: 0,
        parentId: 0,
        detectionItemName: "",
        unitSymbol: "",
        decisionSymbol: "",
        qualityIndex: "",
      },
      formRules: {},
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    sysBusinessDetectionItem() {
      return this.$t("SysBusinessDetectionItem") || {};
    },
  },
  watch: {},
  created() {
    if (this.updateState) {
      this.title = this.$t("SysBusinessDetectionItem.editItemize");
      this.formData = this.rowData;
    } else {
      this.title = this.$t("SysBusinessDetectionItem.addItemize");
    }

    this.dialogVisible = this.dialogFormVisible;
    // 判定符号
    getDictList({ dictCode: "DecisionSymbol" }).then((res) => {
      this.decisionSymbolList = res.data;
    });
  },
  methods: {
    setUnit(val) {
      this.formData.unitSymbol = val.unitName;
    },
    selectUnit() {
      this.unitVisible = true;
    },
    decisionSymbolChange() {
      if (this.formData.decisionSymbol === "∈") {
        this.qualityIndexPlaceholder = this.$t(
          "SysBusinessDetectionItem.connectionIntervalExample"
        );
      } else {
        this.qualityIndexPlaceholder = "";
      }
    },
    // 保存
    submitForm() {
      this.$emit("close", this.formData);
      this.handleClose();
    },
    // 关闭dialog
    handleClose() {
      this.$emit("update:dialogFormVisible", false);
      this.$emit("update:rowData", []);
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" >
.selectProductStandard {
  width: 30px;
  color: white;
  font-size: 20px;
  height: 32px;
  text-align: center;
  border-radius: 5px;
  border: 1px silver;
  background-color: #4787ff;
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>
